<template>
<!-- pages/order/order.wxml -->
<!-- 监听自定义事件 -->
<Tabs :tabs="tabs" @tabsItemChange="handleTabsItemChange">
    <view class="order_main">
        <view class="order_item">		
			<view class="cart_main">
				<view class="cart_item">
					<!-- 商品图片 -->
					<navigator class="cart_img_wrap">
						<image src="../../static/uploads/xiaomi.png" mode="widthFix"></image>
					</navigator>
					<!-- 商品信息 -->
					<view class="cart_info_wrap">
						<navigator class="goods_name">
							小米（MI）小米电视4 2GB+8GB 55英寸四核64位高性能处理器智能平板电视
						</navigator>
						<view class="goods_price_wrap">
							<view class="goods_price">￥4099</view>
						</view>
					</view>
				</view>
			</view>
            <view class="order_time_row">
                <view class="order_time_text">订单日期</view>
                <view class="order_time_value">2021/07/16</view>
            </view>
        </view>
    </view>
</Tabs>
</template>

<script>
// pages/order/order.js
import { request } from "../../request/index.js";
import regeneratorRuntime from "../../lib/runtime/runtime";
import Tabs from "../../components/Tabs/Tabs";

export default {
  data() {
    return {
      orders: [],
      tabs: [{
        id: 0,
        value: "全部",
        isActive: true
      }, {
        id: 1,
        value: "待付款",
        isActive: false
      }, {
        id: 2,
        value: "待发货",
        isActive: false
      }, {
        id: 3,
        value: "退款/退货",
        isActive: false
      }]
    };
  },

  components: {
    Tabs
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function (options) {
    const token = wx.getStorageSync("token");

    let pages = getCurrentPages(); // console.log(pages);
    // 2. 数组中 索引最大的页面就是当前页面

    let currentPage = pages[pages.length - 1]; 
	// console.log(currentPage.options);
    // 3. 获取url上的type参数

    const {
      type
    } = currentPage.options; 
	// 4. 激活选中页面标题 当type=1 index=0

    this.changeTitleByIndex(type - 1);
    this.getOrders(type);
  },
  methods: {
    // 获取订单列表的方法
    async getOrders(type) {
      const res = await request({
        url: "/my/orders/all",
        data: {
          type
        }
      }); // console.log(res);

      this.setData({
        orders: res.orders.map(v => ({ ...v,
          create_time_cn: new Date(v.create_time * 1000).toLocaleString()
        }))
      });
    },

    // 根据标题索引来激活选中 标题数组
    changeTitleByIndex(index) {
      // 2. 修改原数组
      let {
        tabs
      } = this;
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false); // 3. 赋值到data中

      this.setData({
        tabs
      });
    },

    // 标题点击事件 从子组件传递过来
    handleTabsItemChange(e) {
      // console.log(e);
      // 1. 获取被点击的标题索引
      const {
        index
      } = e.detail;
      this.changeTitleByIndex(index); // 2. 重新发送请求 type=1 index=0

      this.getOrders(index + 1);
    }

  }
};
</script>
<style>
@import "./order.css";
.cart_main .cart_item {
  display: flex;
  padding: 10rpx;
  border-bottom: 1rpx solid #ccc;
}
.cart_main .cart_item .cart_img_wrap {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cart_main .cart_item .cart_img_wrap image {
  width: 80%;
}
.cart_main .cart_item .cart_info_wrap {
  flex: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.cart_main .cart_item .cart_info_wrap .goods_name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #666;
}
.cart_main .cart_item .cart_info_wrap .goods_price_wrap {
  display: flex;
  justify-content: space-between;
}
.cart_main .cart_item .cart_info_wrap .goods_price_wrap .goods_price {
  color: var(--themeColor);
  font-size: 34rpx;
}
.cart_main .cart_item .cart_info_wrap .goods_price_wrap .cart_num_tool {
  display: flex;
}
.cart_main .cart_item .cart_info_wrap .goods_price_wrap .cart_num_tool .goods_num {
  width: 55rpx;
  height: 55rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>